<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: icomoon;
            list-style: none;
            user-select: none;
        }

        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?u5dimx');
            src: url('fonts/icomoon.eot?u5dimx#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?u5dimx') format('truetype'),
                url('fonts/icomoon.woff?u5dimx') format('woff'),
                url('fonts/icomoon.svg?u5dimx#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        body {
            background-color: black;
        }

        .mid {
            width: 100%;
            height: 600px;
            position: absolute;
            top: 50%;
            margin-top: -300px;
        }

        body .calc {
            background-color: rgb(0, 0, 0);
            width: 350px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            flex-flow: column;
            border: 2px solid #ff79488c;
            border-radius: 15px;
            transition: .3s ease-in-out all;
        }

        .up {
            width: 100%;
            flex: 0.3;
            color: aliceblue;
            transition: all .3s ease-in-out;
        }

        .screen {
            width: 330px;
            height: 160px;
            margin: 10px auto;
            background-color: #6666662a;
            border-radius: 10px;
            display: flex;
            flex-flow: column;
        }

        .down {
            width: 100%;
            flex: .7;
            color: aliceblue;
            transition: all .3s ease-in-out;
        }

        .down ul {
            width: 330px;
            height: 400px;
            margin: 10px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .down ul li {
            width: 70px;
            height: 70px;
            text-align: center;
            line-height: 70px;
            border-radius: 11px;
        }

        .down ul li input {
            color: aliceblue;
            background-color: #66666640;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 70px;
            border: none;
            margin: 0;
            padding: 0;
            cursor: pointer;
            font-size: 22px;
            border-radius: 10px;
            transition: all .3s ease-in-out;
            font-size: 30px;
            user-select: none;
        }

        .down ul li input:hover {
            background-color: #8c8c8c5e;
        }

        .screen .in {
            padding-left: 20px;
            display: block;
            flex: .7;
            text-align: left;
            font-size: 30px;
            font-weight: 700;
            overflow-wrap: break-word;
            transition: all .3s ease-in-out;
            background-color: transparent;
            border: none;
            color: white;
            cursor: default;
            outline: none;
            user-select: none;
        }

        .screen .out {
            display: block;
            padding-right: 20px;
            flex: .3;
            text-align: right;
            font-size: 30px;
            font-weight: 700;
            transition: all .3s ease-in-out;
        }

        .down ul li .org {
            font-size: 28px;
            color: #ff7948;
        }

        .change {
            position: absolute;
            top: 10%;
            right: 5%;
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background-color: rgba(240, 248, 255, 0.367);
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            cursor: pointer;
            transition: all .3s ease-in-out;
        }
    </style>
</head>

<body>
    <div class="mid">
        <div class="calc">
            <div class="up">
                <div class="screen">
                    <input type="text" class="in" readonly="true" draggable="true" placeholder="">
                    <span class="out">0</span>
                </div>
            </div>
            <div class="down">
                <ul>
                    <li><input type="button" value="C" data-index="empty" class="org"></li>
                    <li><input type="button" value="" data-index="delete" class="delete org"></li>
                    <li><input type="button" value="%" data-index="precent" class="org"></li>
                    <li><input type="button" value="/" data-index="expect" class="org"></li>

                    <li><input type="button" value="7" data-index="7"> </li>
                    <li><input type="button" value="8" data-index="8"> </li>
                    <li><input type="button" value="9" data-index="9"> </li>
                    <li><input type="button" value="*" data-index="multiply" class="org"></li>

                    <li><input type="button" value="4" data-index="4"></li>
                    <li><input type="button" value="5" data-index="5"></li>
                    <li><input type="button" value="6" data-index="6"></li>
                    <li><input type="button" value="-" data-index="minus" class="org"></li>

                    <li><input type="button" value="1" data-index="1"></li>
                    <li><input type="button" value="2" data-index="2"></li>
                    <li><input type="button" value="3" data-index="3"></li>
                    <li><input type="button" value="+" data-index="plus" class="org"></li>

                    <li class="love"><input type="button" value="💖" data-index="love" class="love"></li>
                    <li><input type="button" value="." data-index="."></li>
                    <li><input type="button" value="0" data-index="0"></li>
                    <li><input type="button" value="=" data-index="enter" class="org" id="enter"></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        window.addEventListener("load", function () {
            var inputs = document.querySelectorAll("input")
            var iner = document.querySelector(".in")
            var out = document.querySelector(".out")
            var tag = 0
            var love = document.querySelector(".love")
            love.onclick = function () {
                alert("哈喽")
            }

            for (var i = 1; i < inputs.length; i++) {
                inputs[i].addEventListener("click", function () {
                    var up = this.getAttribute("data-index")
                    if (tag == 1) {
                        if (up == 0 || up == 1 || up == 2 || up == 3 || up == 4 || up == 5 || up == 6 || up == 7 || up == 8 || up == 9 || up == '.') {
                            iner.value = ''
                            iner.value += up
                            out.innerHTML = '0'
                            tag = 0
                        }
                        else {
                            if (this.value != '=' && this.value != '' && this.value != 'C' && this.value != '.') {
                                iner.value = out.innerHTML;
                                iner.value += this.value;
                                tag = 0
                            }
                            if (up == "empty") {
                                iner.value = ''
                                out.innerHTML = '0'
                                tag = 0
                            }
                        }
                    }

                    else {
                        if (up == 0 || up == 1 || up == 2 || up == 3 || up == 4 || up == 5 || up == 6 || up == 7 || up == 8 || up == 9)
                            iner.value += up
                        else {
                            if (up == "empty") {
                                iner.value = ''
                                out.innerHTML = '0'
                                tag = 0
                            }
                            if (up == "delete") {
                                var arry = new Array;
                                for (var i = 0; i < iner.value.length - 1; i++) {
                                    arry[i] = iner.value[i]
                                }
                                iner.value = ''
                                for (var i = 0; i < arry.length; i++) {
                                    iner.value += arry[i]
                                }
                            }
                        }
                        if (iner.value != '') {
                            if (iner.value[iner.value.length - 1] != "%" && iner.value[iner.value.length - 1] != "÷" && iner.value[iner.value.length - 1] != "+" && iner.value[iner.value.length - 1] != "-" && iner.value[iner.value.length - 1] != "*" && iner.value[iner.value.length - 1] != ".") {
                                if (up == "precent") {
                                    iner.value += this.value
                                }
                                if (up == "expect") {
                                    iner.value += this.value
                                }
                                if (up == "multiply") {
                                    iner.value += this.value
                                }
                                if (up == "minus") {
                                    iner.value += this.value
                                }
                                if (up == "plus") {
                                    iner.value += this.value
                                }
                                if (up == ".") {
                                    iner.value += this.value
                                }
                            }
                            if (this.value == '=') {
                                if (!(iner.value[iner.value.length - 1] != "%" && iner.value[iner.value.length - 1] != "÷" && iner.value[iner.value.length - 1] != "+" && iner.value[iner.value.length - 1] != "-" && iner.value[iner.value.length - 1] != "*")) {
                                    alert("出错啦！")
                                }
                                else {
                                    tag = 1;
                                    var calc = eval(iner.value)
                                    out.innerHTML = calc
                                }
                            }
                        }
                    }
                })
            }
        })
        
    </script>
</body>

</html>